<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-input
        v-model.trim="listQuery.nickname"
        clearable
        placeholder="请输入用户昵称"
      />
      <el-select
        v-model="listQuery.channel"
        clearable
        filterable
        placeholder="渠道"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportExcel('#anchorListFirst', '主播列表')"
      >导出</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        id="anchorListFirst"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="主播ID">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.accountId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="已提现（元）">
          <template slot-scope="{ row }">
            {{row.withdraw / 100}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="音视频收入（元）">
          <template slot-scope="{ row }">
            {{(row.videoRevenue + row.voiceRevenue) / 100}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼物收入（元）">
          <template slot-scope="{ row }">
            {{(row.gift_diamonds + row.gift_package_diamonds) / 100}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="视频时长(分钟)/被叫次数/接通次数">
          <template slot-scope="{ row }">
            {{row.videoTime/ 60}} / {{row.videoCount}} / {{row.videoCalledCount}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="语音时长(分钟)/被叫次数/接通次数">
          <template slot-scope="{ row }">
            {{row.voiceTime / 60}} / {{row.voiceCount}} / {{row.voiceCalledCount}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="推荐权重W">
          <template slot-scope="{ row }">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="160">
          <template slot-scope="{ row }">
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import { deepClone } from '@/utils';
  import { xhrAnchorStatistic } from '@/api/account'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
  import ImageViewer from '@/components/ImageViewer'

  export default {
    name: 'AnchorList',
    components: { TablePagination, ImageViewer },
    data() {
      return {
        list: null,
        total: 0,
        channels: [],
        daterangeValue: '',
        identifyTypeItems: { 0: '未认证', 1: '真人', 2: '主播' },
        vipTypeItem: { '0': '白银', '1': '黄金', '-1': '无vip' },
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
        listQuery: {
          page: 1,
          limit: 20,
          channel: null,
          startTime: null,
          endTime: null,
          nickname: null,
          identifyType: null,
          userId: (this.$route.query && this.$route.query.id) || null
        },
        UserClassList: [],
        userDetail: null,
        listLoading: true,
        dialogLoading: true,
        dialogVisible: false,
        showImage: false,
        imageUrl: ''
      }
    },
    created() {
      this.doSearch()
      this.getChannels()
    },
    methods: {
      getChannels() {
        this.xhrGetChannels().then(resp => {
          this.channels = resp.data
        })
      },
      doSearch() {
        if (this.listQuery.userId && !/^[\d,]*$/.test(this.listQuery.userId)) {
          this.$message.warning('用户ID只能是数字')
          this.listLoading = false
          return
        }
        const query = deepClone(this.listQuery)
        query.userTags = null
        xhrAnchorStatistic(query)
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.count
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .detail-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    > span {
      width: 30%;
      margin: 10px 0;
      > span {
        font-weight: 700;
      }
    }
  }
</style>
